<template>
	<div class="exam_record">
		<div class="icon">
			<i :class="!data.isExamPass ? 'el-icon-exam-fail' : 'el-icon-exam-pass'"></i>
		</div>
		<div class="intro">
			<h4>{{ examInfo.name }}</h4>
			<el-row>
				<el-col :xs="24" :sm="12" :lg="8">试题类型：{{ examInfo.testPaper.pageType === '1' ? '普通试卷' : '随机试卷' }}</el-col>
				<el-col :xs="24" :sm="12" :lg="8">考试时长：{{ examInfo.examDuration }}分钟</el-col>
				<el-col :xs="24" :sm="12" :lg="8">卷面总分：{{ examInfo.testPaper.totalScore }}分</el-col>
				<el-col :xs="24" :sm="12" :lg="8">及格分数：{{ examInfo.passScore | formatDecimal(1) }}分</el-col>
				<el-col :xs="24" :sm="12" :lg="8">我的得分：{{ data.score }}分</el-col>
				<el-col :xs="24" :sm="12" :lg="8">交卷时间：{{ data.createTime }}</el-col>
			</el-row>
		</div>
		<div class="button">
			<slot></slot>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {};
	},
	computed: {
		examInfo() {
			return this.data.testExam || {};
		},
		isExamPass() {
			let score = parseFloat(this.data.score) || 0;
			let passScore = parseFloat(this.examInfo.passScore) || 0;
			return score >= passScore;
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.exam_record::v-deep {
	display: flex;
	border-bottom: solid 1px #ebeef5;
	.icon {
		display: flex;
		align-items: center;
		padding: 16px;
		font-size: 60px;
		line-height: 1;
		.el-icon-exam-fail {
			color: #f56c6c;
		}
		.el-icon-exam-pass {
			color: #67c23a;
		}
	}
	.intro {
		flex: 1;
		padding: 16px;
		overflow: hidden;
		h4 {
			font-size: 16px;
			line-height: 1;
		}
		.el-col {
			line-height: 1;
			margin-top: 16px;
			color: #606266;
		}
	}
	.button {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 16px;
		flex-shrink: 0;
		border-left: solid 1px #ebeef5;
		.el-button {
			margin-left: 0;
			margin-top: 10px;
			&:first-child {
				margin-top: 0;
			}
		}
	}
}
@media screen and (max-width: 767px) {
	.exam_record::v-deep {
		position: relative;
		flex-direction: column;
		.icon {
			position: absolute;
			top: 0;
			right: 0;
		}
		.intro {
			padding: 16px 16px 0;
		}
		.button {
			border-left: none;
			flex-direction: row;
			.el-button {
				width: 100%;
				margin-top: 0;
				font-size: 16px;
				margin-left: 10px;
				&:first-child {
					margin-left: 0;
				}
			}
		}
	}
}
</style>
